<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script>
      // 1. 获取 document
      // 2. 通过 document 获取元素
      function fun1() {
        var el1 = document.getElementById("username"); // 根据元素的 id 值获取页面上唯一的一个元素
        console.log(el1);
      }
      function fun2() {
        var el2 = document.getElementsByTagName("input");
        for (var i = 0; i < el2.length; i++) {
          console.log(el2[i]);
        }
      }
      function fun3() {
        var el3 = document.getElementsByName("aaa");
        for (var i = 0; i < el3.length; i++) {
          console.log(el3[i]);
        }
      }
      function fun4() {
        var el4 = document.getElementsByClassName("a");
        for (var i = 0; i < el4.length; i++) {
          console.log(el4[i]);
        }
      }

      function fun5() {
        // 1. 先获取父元素
        var div01 = document.getElementById("div01");
        // 2. 通过父元素，获取所有子元素
        var cs = div01.children;
        for(var i = 0; i < cs.length; i++) {
            console.log(cs[i]);
        }

        // 通过父元素获取第一个子元素
        console.log(div01.firstElementChild);
        // 通过父元素获取最后一个子元素
        console.log(div01.lastElementChild);
      }

      function fun6() {
        // 1.先获取子元素
        var pinput = document.getElementById("password");
        // 2. 通过子元素获取父元素
        console.log(pinput.parentElement);
      }
      
      function fun7() {
        // 1. 获取子元素
        var pinput = document.getElementById("password");
        // 2.1 获取子元素前面第一个元素
        console.log(pinput.previousElementSibling);
        // 2.2 获取子元素后面第一个元素
        console.log(pinput.nextElementSibling);
      }
    </script>
  </head>
  <body>
    <div id="div01">
      <input type="text" class="a" id="username" name="aaa" />
      <input type="text" class="a" id="password" name="aaa" />
      <input type="text" class="b" id="email" />
      <input type="text" class="a" id="address" />
    </div>
    <input
      type="button"
      value="通过父元素获取子元素"
      onclick="fun5()"
      id="btn05"
    />
    <input
      type="button"
      value="通过子元素获取父元素"
      onclick="fun6()"
      id="btn06"
    />
    <input
      type="button"
      value="通过当前元素获取兄弟元素"
      onclick="fun7()"
      id="btn07"
    />

    <hr />
    <input type="text" class="a" /><br />
    <input
      type="button"
      value="根据id获取指定元素"
      onclick="fun1()"
      id="btn01"
    />
    <input
      type="button"
      value="根据标签名获取多个元素"
      onclick="fun2()"
      id="btn02"
    />
    <input
      type="button"
      value="根据name属性值获取多个元素"
      onclick="fun3()"
      id="btn03"
    />
    <input
      type="button"
      value="根据class属性值获取指多个元素"
      onclick="fun4()"
      id="btn04"
    />
  </body>
</html>
